﻿@model IEnumerable<Vidly.Models.Movie>

@{
    ViewBag.Title = "Movies";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Movies</h2>
<p>
    @Html.ActionLink("New Movie", "New", "Movies", null, new { @class = "btn btn-primary" })
</p>
<table id="movies" class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>Movie</th>
            <th>Genre</th>
            <th>Delete</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
@section scripts
{
    <script>
        $(document).ready(function () {
            var table = $("#movies").DataTable({
                ajax: {
                    url: "/api/movies",
                    dataSrc: ""
                },
                columns: [
                    {
                        data: "name",
                        render: function(data, type, movie) {
                            return "<a href='/movies/edit/" + movie.id + "'>" + movie.name + "</a>";
                        }
                    },
                    {
                        data: "genre.name"
                    },
                    {
                        data: "id",
                        render: function(data) {
                            return "<button class='btn-link js-delete' data-movie-id=" + data + ">Delete</button>";
                        }
                    }
                ]
            });


            $("#movies").on("click", ".js-delete", function () {
                var button = $(this);

                bootbox.confirm("Are you sure you want to delete this movie?", function (result) {
                    if (result) {
                        $.ajax({
                            url: "/api/movies/" + button.attr("data-movie-id"),
                            method: "DELETE",
                            success: function () {
                                table.row(button.parents("tr")).remove().draw();
                            }
                        });
                    }
                });
            });
        });
    </script>
}
